<template>
	<view class="page-box">
		<uni-cusTitle title='购在溧水' :isIcon='true' :iscIcon='true' :imgc='`${staticUrl}index/menu04.png`'></uni-cusTitle>
		<view class="bg-box">
			<image :src="`${staticUrl}mine/bg_youhui.png`" mode="scaleToFill"></image>
		</view>

		<view class="content-box">
			<view class="menu-box">
				<view class="item-menu" v-for="(item,index) in menuList" :key='index'>
					<view :class="current==index?'active':''" @click="menuTap(index)">{{item.name}}</view>
				</view>
			</view>

			<view class="list-box">
				<template v-if="list.length>0">
					<view class="item-box" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
						<image class="bg-box" src="/static/mine/border01.png"></image>
						<view class="left">
							<view class="big-box">
								<view class="s-box">
									<image class="wh100" :src="item.imgurl" mode="aspectFill"></image>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="title line-one">{{item.title}}</view>
							<view class="fen-box">
								<image src="/static/index/fenshu.png"></image>
								<view class="s-fen-box">
									<image src="/static/sy1.png"></image>
									<text>{{item.fen}}</text>分
								</view>
							</view>
							<view class="addr-box">
								<!-- <image src="/static/index/icon-map5.png"></image> -->
								<text class="line-two" @click.stop="daohangTap(item)">{{item.addr}}</text>
								<view class="s-right">
									<uni-icons type="paperplane-filled" size="26" color="#884FFF"></uni-icons>
									<text>1.8Km</text>
								</view>
							</view>
						</view>
					</view>

					<view class="no-box" v-if="isMore">无更多数据了...</view>
				</template>
			</view>
			<uni-empty tips="'暂无数据...'" v-if="list.length==0"></uni-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				staticUrl:this.$base.staticUrl,
				current: 0,
				menuList: [{
						name: '本地特产'
					},
					{
						name: '便利超市'
					},
					{
						name: '热门商场'
					},
					{
						name: '医药保健'
					}
				],

				isMore: true,
				list: [{
						id: 1,
						imgurl: '/static/top_back.png',
						title: '天生桥景区',
						fen: '4.5',
						addr: '南京市溧水区洪蓝镇天生桥路500号',
						latitude: 39.909,
						longitude: 116.39742,
					},
					{
						id: 2,
						imgurl: '/static/top_back.png',
						title: '天生桥景区',
						fen: '4.5',
						addr: '南京市溧水区洪蓝镇天生桥路500号',
						latitude: 39.909,
						longitude: 116.39742,
					}
				]
			}
		},

		onLoad() {

		},
		methods: {
			menuTap(index) {
				this.current = index
			},

			daohangTap(item) {
				uni.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
				})
			},

			toDetail(item) {
				uni.navigateTo({
					url: './shopDetail?id=' + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg-box {
		width: 100%;
		height: 260rpx;
		overflow: hidden;

		image {
			width: 100%
		}
	}

	.content-box {
		width: 100%;
		background: #FAEDFC;
		border-top-right-radius: 80rpx;
		padding-top: 42rpx;
		margin-top: -86rpx;
		position: relative;
		z-index: 10;
	}

	.menu-box {
		width: 690rpx;
		height: 72rpx;
		margin: 0rpx auto 36rpx;
		background: #884FFF;
		border-radius: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 4rpx solid #884FFF;

		.item-menu {
			width: 220rpx;
			height: 100%;
			color: #fff;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.active {
				width: 168rpx;
				height: 72rpx;
				background: #FFDD57;
				border-radius: 36rpx;
				color: #884FFF
			}
		}
	}

	.list-box {
		width: 100%;
		margin-top: 20rpx;
		position: absolute;
		left: 50%;
		top: 150rpx;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;

		.item-box {
			width: 100%;
			height: 240rpx;
			margin-bottom: 52rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.bg-box {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0
			}

			.left {
				width: 250rpx;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: center;

				.big-box {
					width: 190rpx;
					height: 190rpx;
					background: #884FFF;
					border-radius: 32rpx;
					transform: translateY(-16rpx);

					.s-box {
						width: 190rpx;
						height: 190rpx;
						border-radius: 32rpx;
						overflow: hidden;
						transform: translate(-6rpx, -6rpx);
					}
				}
			}

			.right {
				flex: 1;
				position: relative;
				padding-right: 20rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #000;
					line-height: 40rpx;
				}

				.fen-box {
					position: relative;
					margin-top: 15rpx;

					>image {
						width: 138rpx;
						height: 40rpx;
						position: absolute;
						left: 0;
					}

					.s-fen-box {
						width: 138rpx;
						height: 40rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #FFDD57;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 33rpx;
							font-family: AaHouDiHei;
							font-weight: bold;
							margin-top: -5rpx;
						}
					}
				}

				.addr-box {
					font-size: 26rpx;
					display: flex;
					margin-top: 15rpx;
					font-weight: bold;
					color: #3A525E;

					.line-two {
						line-height: 42rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 6rpx;
					}

					.s-right {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-left: 1px solid #E7E9EA;
						padding-left: 12rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	}
</style>